<template>
    <div class="goods-bg" >
      <!--小球-->
      <!--<transition-->
        <!--@before-enter="beforeEnter"-->
        <!--@enter="enter"-->
        <!--@after-enter="afterEnter">-->
        <!--<div class="ball" v-show="ballFlag" ref="ball"></div>-->
      <!--</transition>-->
      <!--轮播-->
      <div class="mui-card">
        <div class="mui-card-content">
          <div class="mui-card-content-inner">
            <!-- <swiper-list :list="thumImages" :isfull="false"></swiper-list> -->
            <img :src="thumImages" title="查看图片" style="margin-left: 25%;" width="150px" height="150px">
          </div>
        </div>
      </div>
      <!--购买-->
      <div v-for="item in goodsInfo" :key="item.id">
      <div class="mui-card">
        <div class="mui-card-header">{{item.brief}}</div>
        <div class="mui-card-content">
          <div class="mui-card-content-inner">
            <p class="price">
              市场价：
              <del>￥{{item.counterPrice}}</del>&nbsp;&nbsp;销售价：<span class="now_price">￥{{item.retailPrice}}</span>
            </p>
            <p>购买数量：
              <number-box @getcount="getSelectedCount" :max="item.sortOrder"></number-box>
            </p>
            <p>总价：
              <span class="now_price">￥{{prices}}</span>
            </p>
            <p>
              <mt-button type="primary" size="small">立即购买</mt-button>&nbsp;
              <mt-button type="danger" size="small" @click="addShop">加入购物车</mt-button>
            </p>
          </div>
        </div>
      </div>
      <!--参数-->
      <div class="mui-card">
        <div class="mui-card-header">商品参数</div>
        <div class="mui-card-content">
          <div class="mui-card-content-inner">
            <p>商品货号：{{item.goodsSn}}</p>
            <p>库存情况：{{item.sortOrder}}件</p>
            <p>上架时间：{{item.addTime | dataFormat}}</p>
          </div>
        </div>
        <div class="mui-card-footer">
          <mt-button type="primary" size="large" plain @click="goGoodsDesc(id)">图文介绍</mt-button>
          <mt-button type="danger" size="large" plain @click="goGoodsComment(id)">商品评论</mt-button>
        </div>
      </div>
      </div>
      <!--end-->
    </div>
</template>

<script>
  import { getThumimages } from '@/api/api'
  import { getInfo } from '@/api/api'

  import SwiperList from '../subcomponents/swiper'
  import NumberBox from '../subcomponents/goodsInfo_numberbox'

  export default {
    name: 'goodInfo',
    components:{
      SwiperList,
      NumberBox
    },
    data() {
      return {
        id:this.$route.params.id,
        thumImages:'',
        list:'',
        goodsInfo:[],
        ballFlag:false,
        ballFlag2:false,
        selectedCount:1,
        prices:"",
        prices1:'',
      }
    },
    created () {
      this.createInfo();
      //this.createImages();
    },
    methods: {
      createImages() {
        getThumimages(this.id)
          .then( res => {
            this.thumImages = res.data.message
            // console.log(this.thumImages)
            this.list = res.data.message
            this.list.forEach(item=>{
              item.img = item.src
            })
          })
      },
      // createInfo() {
      //   getInfo(this.id)
      //     .then(res=> {
      //       this.goodsInfo = res.data.message[0]
      //       console.log(this.goodsInfo)
      //     })
      // },
       createInfo(){
         var $this=this;
        this.axios({
        method:'get',
        url: "http://localhost:8083/goods/list",
        params:{id:this.id}
      }).then(function(res){
          console.log("查询的商品详情",res);
          $this.goodsInfo=res.data.obj.list;
          $this.prices=res.data.obj.list[0].retailPrice;
          $this.prices1=res.data.obj.list[0].retailPrice;
          $this.thumImages=res.data.obj.list[0].picUrl;
      });
      },
      goGoodsDesc(id){
        this.$router.push('/home/goodsdesc/'+id)
      },
      goGoodsComment(id){
        this.$router.push('/home/goodscomment /'+id)
        // this.$router.push({name:'goodscomment',params:{id}})
      },
      addShop() {
        //添加到购物车
        // this.ballFlag = !this.ballFlag
        //商品id，商品数量，商品价格，商品是否选中
        if(localStorage.getItem('username')==null){
          alert("亲，请先登录哦");
          this.$router.push('/login')
          return
        }
        var goodsinfo = {
          userId:localStorage.getItem('userId'),
          goodsId:this.id,
          number:this.selectedCount,
          checked:1,
        }
        console.log("加入购物车的商品,",goodsinfo);
        //return
        var $this =this;
        this.axios({
          method:'post',
          url: "http://localhost:9999/market/ecCart/addCart",
          data:goodsinfo
        }).then(function(res){
          if(res.data.code==401){
            alert(res.data.msg);
          }
            if(res.data.code==200){
              alert(res.data.msg);
              $this.$router.push("/car")
            }
        })

        this.$store.commit('addToCat',goodsinfo)
      },
      getSelectedCount(count) {
        if(count>this.selectedCount){
          this.prices+=this.prices1;
          this.selectedCount = count;
        }else if(count<=this.selectedCount){
          this.prices-=this.prices1;
          this.selectedCount = count;
        }
        //alert("购买数量不能超过库存!");
      }
      // beforeEnter(el) {
      //   el.style.transform = "translate(0, 0)";
      // },
      // enter(el,done) {
      //   el.offsetWidth;
      //   el.style.transform = "translate(90px,230px)";
      //   el.style.transition = "all 1s ease";
      //   done()
      // },
      // afterEnter(el) {
      //   this.ballFlag = !this.ballFlag
      //   console.log( this.ballFlag)
      // }
    }
  }
</script>

<style lang="scss" scoped>
.goods-bg {
  background: #eee;
  overflow: hidden;

  .now_price {
    color: red;
    font-size: 16px;
    font-weight: bold;
  }
  .mui-card-footer {
    display: block;

    button {
      margin: 15px 0;
    }
  }
  .ball {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    z-index:99;
    background: red;
    position: absolute;
    top: 390px;
    left: 150px;
  }
}




</style>
